<!--
 * @Description: 
 * @Author: 曹旸华
 * @Date: 2021-07-17 11:06:17
 * @LastEditors: 曹旸华
 * @LastEditTime: 2021-07-17 23:01:02
-->
<template>
<body>

  <div id="box">
    <ul id="imagegallery">
      <li class="l1" id="l1">
        <img
          class="people"
          src="https://img0.baidu.com/it/u=868592943,3379115046&fm=26&fmt=auto&gp=0.jpg"
          height="100px"
          width="100px"
          alt="img1"
          @click="change(1)"
        /><br />
        <center><font color="#2D95B5">钟南山</font></center>
      </li>
      <li class="l2" id="l2">
        <img
         class="people"
          src="https://img2.baidu.com/it/u=1925502367,1828255633&fm=26&fmt=auto&gp=0.jpg"
          height="100px"
          width="100px"
          alt="img2"
          @click="change(2)"
        /><br />
        <center><font color="#2D95B5">张文宏</font></center>
      </li>
      <li class="l3" id="l3">
        <img
         class="people"
          src="https://img1.baidu.com/it/u=3882954834,3483627938&fm=26&fmt=auto&gp=0.jpg"
          height="100px"
          width="100px"
          alt="img3"
          @click="change(3)"
        /><br />
        <center><font color="#2D95B5">李兰娟</font></center>
      </li>
    </ul>
  </div>
  </body>
</template>

<script>
export default {
  data() {
    return { };
    
  },
  computed: {},
  methods: {
    change(id){
      if(id==1){
        let box = document.getElementById('box');
       box.style.background = "url('http://120.53.125.221:8181/uploadimg/钟南山.jpg') no-repeat top center";
       box.style.backgroundSize = "cover";
      }else if(id==2){
        let box = document.getElementById('box');
       box.style.background = "url('http://120.53.125.221:8181/uploadimg/张文宏.jpg') no-repeat top center";
       box.style.backgroundSize = "cover";
      }else if(id==3){
        let box = document.getElementById('box');
       box.style.background = "url('http://120.53.125.221:8181/uploadimg/李兰娟.jpg') no-repeat top center";
       box.style.backgroundSize = "cover";
      }
       
    }
   
  },
  created() {},
  mounted() {

  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

#box {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  /* background-color: tomato; */
}

#imagegallery {
  list-style: none;
  padding-left: 200px;
}

#imagegallery li {
  float: left;
  margin: 40px 20px 20px 0px;
  display: inline;
}
.people:hover{
  cursor: pointer;
}

</style>